<template>
	<div class="nav">
		<div class="left">
			<router-link to="/wyh">Weknow</router-link>
			<router-link to="">读书</router-link>
			<router-link to="">电影</router-link>
			<router-link to="">音乐</router-link>
			<router-link to="">同城</router-link>
			<router-link to="">小组</router-link>
			<router-link to="">阅读</router-link>
			<router-link to="">FM</router-link>
			<router-link to="">时间</router-link>
			<router-link to="">WKtalk</router-link>
		</div>
		<!-- <div class="right">
			<router-link to="/cll/login">登录/注册</router-link>
		</div> -->
		<div class="right">
			<ul>
				<li><a href="">下载Weknow客户端</a></li>
				<li><a href="">提醒</a></li>
				<li>
					<img :src="suburl1+obj.touxiang" v-if="isimgshow">
					<div class="userinfo" v-if="isspanshow">欢迎{{obj.email}}
						<div class="hidebox">
							<a href="">个人中心</a>
							<a href="" @click="outlogin">退出登录</a>
						</div>
					</div>
				</li>
				<li>
					<router-link v-if="isloginshow" to="/cll/login">登录/注册</router-link>
					<!-- <a @click="fn3" v-if="isloginshow" style="cursor: pointer">登录</a> -->
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				isimgshow: true,
				isspanshow: true,
				isloginshow: false,
				// inputvalue: "",
				// soureData: [],
				// showData: [],
				// isShowSearch: false,
				// isControlShow: true,
				// arr: [],
				obj: {}
			};
		},
		async mounted() {
			let res2 = await this.$axios("/getuserinfo")
			if (res2.data.code == 4004) {
				this.isloginshow = true
				this.isimgshow = false
				this.isspanshow = false
			} else if (res2.data.code == 2004) {
				this.isloginshow = false
				this.isimgshow = true
				this.isspanshow = true
				this.obj = res2.data
			}
		},
		methods: {
			async outlogin() {
				let res = await this.$axios("outlogin")
				if (res.data.code == 2001) {
					localStorage.removeItem("token")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		width: 100%;
		height: 28px;
		background-color: #545652;
		min-width: 950px;
		display: flex;
		justify-content: space-between;
		font-family: Helvetica, Arial, sans-serif;

		a {
			cursor: pointer;
			text-decoration: none;
			color: #d5d5d5;
			line-height: 28px;
			font-size: 12px;
			text-align: center;

			&:hover {
				text-decoration: underline;
			}
		}

		.left {
			width: 480px;
			display: flex;
			justify-content: space-evenly;
		}

		.right {
			// display: flex;
			width: 500px;
			margin-right: 12px;
			text-align: center;

			ul {
				display: flex;
				list-style: none;

				li {
					width: 160px;
					height: 28px;
					line-height: 28px;
					display: flex;
					justify-content: center;
					position: relative;

					img {
						width: 25px;
						height: 25px;
						border-radius: 50%;
					}

					.userinfo {
						width: 160px;
						display: inline-block;
						font-size: 13px;
						text-align: left;
						cursor: pointer;
						color: #d5d5d5;
						line-height: 28px;
						font-size: 12px;

						.hidebox {
							width: 200px;
							height: 50px;
							background-color: #ccc;
							position: absolute;
							z-index: 10000;
							left: -5px;
							display: none;
							border-radius: 10px;
							
							a{
								color: #fff;
							}
						}

						&:hover .hidebox {
							display: flex;
							flex-direction: column;
						}
					}
				}
			}
		}
	}
</style>
